<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="$!rc.contextPath/common/bootstrap.min.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_604979_156g2g4k47w7mn29.css" />
		<link rel="stylesheet" href="$!rc.contextPath/common/common.css" />
		<link rel="stylesheet" href="$!rc.contextPath/css/subbranch.css" />
		<title>选择门店</title>
	</head>
	<body>
	<div class="title text-center">
		<span>选择门店</span>
		<i class="iconfont icon-htmal5icon14" onclick="f_reload_position();" id="area">重新定位</i>
	</div>
	<div class="big-title">
		<div >
			当前选择门店
		</div>
		<div id="currentChoose" class="$list[0].storeId" onclick="f_choose('$list[0].storeId', '$list[0].storeName');">
			$list[0].storeName
		</div>
	</div>
	<ul class="subbranch-list">
		<li class="subbranch-item">
			<div class="small-title">
				附近门店
			</div>
		</li>
		<li class="subbranch-item">
			<div class="small-title">
				请选门店
			</div>
			<ul class="subbranch-item-list">
				#foreach($store in $list)
				<li class="$!store.storeId" onclick="f_choose('$!store.storeId', '$!store.storeName');">
					$!store.storeName
				</li>
				#end
			</ul>
		</li>
	</ul>
	<script src="$!rc.contextPath/common/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp"></script>
	<script type="text/javascript">
		var lat, lng;
	
		$(function(){
			
			if(sessionStorage.getItem('storeName') == null){
				alert("您的附近暂无门店");
			}else{
				$("#currentChoose").html(sessionStorage.getItem('storeName'));
			}
			
		})
		
		function f_reload_position(){
			//var lat = sessionStorage.getItem("lat");
			//var lng = sessionStorage.getItem("lng");
			//f_showPosition(lat ,lng);
			
				wx.config({
				    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId : '$!appId', // 必填，公众号的唯一标识
				    timestamp : '$!timestamp', // 必填，生成签名的时间戳
				    nonceStr : '$!nonceStr', // 必填，生成签名的随机串
				    signature : '$!signature',// 必填，签名
				    jsApiList : ['getLocation'] // 必填，需要使用的JS接口列表
				});
				
				/* 获取详细经纬度后反查腾讯地图得到确切地址 */
				wx.ready(function () {
					wx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function (res) {
							var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							var speed = res.speed; // 速度，以米/每秒计
							var accuracy = res.accuracy; // 位置精度
							lat = latitude;
							lng = longitude;
							sessionStorage.setItem("lat", latitude);
							sessionStorage.setItem("lng", longitude);
							
							f_showPosition(lat ,lng);
						}
					});
					
				})
			
		}
		
		function f_showPosition(lat, lng){  
			var latlon =lat+','+lng;  
			var url = "http://api.map.baidu.com/geocoder/v2/?ak=ZvGVGUyxG9pLkaZT0Da2GFzFojYy4hKf&callback=renderReverse&location="+latlon+"&output=json&pois=1";  
			$.ajax({   
				type: "GET",   
				dataType: "jsonp",   
				url: url,  
				"async":false, 
				beforeSend: function(){  
					$("#area").html('正在定位...');  
				},  
				success: function (json) {
				    if(json.status==0){  
				        var cityName = json.result.addressComponent.city;
				        
				        f_loadstore(cityName, lat, lng);
				        
				        sessionStorage.setItem('cityName', cityName);
				        sessionStorage.setItem('formattedAddress', json.result.formatted_address);
				    }  
				},  
				error: function (XMLHttpRequest, textStatus, errorThrown) {   
				   alert(latlon+"地址位置获取失败");   
				}  
			});  
		} 
		
		/* 获取区域信息 */
		 function f_loadstore(cityName, lat, lng){
			$.ajax({
				"type": "POST",
				"url" : "$!rc.contextPath/common/areaInfo",
				"dataType" : "json",
				"async":false, 
				"data" : {
					areaName : cityName,
					lat : lat,
					lng : lng,
					distance : 10000
			},
			"success": function(data) {
					areaId = data.data.id;
					// 保存areaId到sessionStorage
					sessionStorage.setItem('areaId', areaId);
					$("#area").html("重新定位");
					if(data.data.store != null){
						$("#currentChoose").html(data.data.store.store_name);
						sessionStorage.setItem('storeName', data.data.store.store_name);
						sessionStorage.setItem('storeId', data.data.store.store_id);
					}else{
						alert("您的附近暂无门店");
					}
					
				}
			});
		}; 
		
		function f_choose(storeId, storeName){
			sessionStorage.setItem('storeName', storeName);
			sessionStorage.setItem('storeId', storeId);
			self.location = '$!rc.contextPath/index?storeId=' + storeId;
		}
	</script>
	
	</body>
</html>
